<script setup name="View3d">
import { ref, onMounted, computed } from "vue";
import { useRoute, useRouter } from "vue-router";
import DisplayerArea3d from "../components/DisplayerArea3d.vue";

import { useAppStore } from "../stores/appStore";
import { storeToRefs } from "pinia";
import MainToolbar3d from "../components/MainToolbar3d.vue";

const appStore = useAppStore();

const route = useRoute();
const router = useRouter();
const view3d = ref(null);
const displayArea = ref(null);

const { toolbarPos } = storeToRefs(appStore);

const mainClass = computed(() => {
	const vorh = toolbarPos.value === "top" ? "vertical" : "horizontal-reverse";
	return "flex-" + vorh;
});

async function onAction(action) {
	// console.log("OnToolbarAction", action);

	switch (action.name) {
		case "displayAuto":
			displayArea.value.displayAuto();
			break;
		case "clearDisplay":
			displayArea.value.clear();
			break;
		case "deleteViewerMeasure":
			displayArea.value.removeSelectedViewportMeasures();
			break;
		case "colorMap":
			displayArea.value.setViewportColorMap(action.value);
			break;
		case "volumeColor":
			displayArea.value.setVRColor(action.value);
			break;
		case "reset":
			displayArea.value.reset();
			break;
		case "setWindow":
			if (action.ww === 0 && action.wl === 0) {
				displayArea.value.setDefaultWindow();
			} else {
				displayArea.value.setWindow(action.ww, action.wl);
			}
			break;
		case "layoutmpr":
		// displayArea.value.setLayout("layoutmpr");
		// break;
		case "layoutmprvr":
			displayArea.value.setLayout(action.name);
			break;
		case "showOutline":
			displayArea.value.showOutline(action.value);
			break;
		case "showAxes":
			displayArea.value.showAxes(action.value);
			break;
		case "toggleOrientText":
			displayArea.value.toggleOrientText();
			break;
		case "changeAxesType":
			displayArea.value.changeAxesType(action.value);
			break;
		case "shiftPos":
			displayArea.value.shiftVRColor(action.value);
			break;
		case "enableVRShift":
			displayArea.value.enableVRShiftColor(action.value);
			break;
		case "changeblendMode":
			displayArea.value.setBlendMode(action.value);
			break;
		case "changeCameraPos":
			displayArea.value.setCameraPos(action.value);
			break;
		case "syncWindow":
			displayArea.value.toggleCrossline();
			break;
		case "syncZoom":
			appStore.syncOperation.syncZoom = !appStore.syncOperation.syncZoom;
			break;
		case "setMeasureType":
			displayArea.value.setMeasureType(action.value);
			break;
		default:
			break;
	}
}

const goto2d = () => {
	router.back();
};

const onKeyUp = e => {
	console.log("onkeyup", e.key);
};

onMounted(() => {
	console.log("View3d mounted, studyId:", route.query.studyId);
});
</script>

<template>
	<div
		class="container flex-vertical"
		ref="view3d"
		tabindex="0"
		@keyup.stop.prevent="onKeyUp"
		@contextmenu.prevent
	>
		<div class="head-menubar">
			<MainToolbar3d @action="onAction" />
			<div class="close-3d">
				<span class="closeicon" @click="goto2d">
					<svg-icon class="closeicon__svg" :icon="`icon-cuowu`" />
				</span>
			</div>
		</div>
		<div class="main" :class="mainClass">
			<div class="display-area">
				<DisplayerArea3d ref="displayArea" />
			</div>
		</div>
		<div class="footer">Statusbar</div>
	</div>
</template>

<style scoped lang="scss">
$bg-color: #333;
$main-color: lightblue;
$header-color: #45b7ec;
$footer-color: #45b7ec;
$resizer-width: 2px;
$header-height: 100px;
$footer-height: 34px;

.container {
	background-color: var(--color-theme-bg);
	height: 100vh;
	width: 100vw;
	max-width: 100%;
	max-height: 100%;
	justify-content: center;
	color: var(--color-theme-text);
	user-select: none;
}

.flex-vertical {
	display: flex;
	flex-direction: column;
}

.flex-vertical-reverse {
	display: flex;
	flex-direction: column-reverse;
}

.flex-horizontal {
	display: flex;
	flex-direction: row;
}

.flex-horizontal-reverse {
	display: flex;
	flex-direction: row-reverse;
}

.resizer-vertical {
	cursor: ew-resize;
	width: $resizer-width;
	background-color: gray;
	flex-shrink: 0;
	z-index: 10;
}

.resizer-horizontal {
	cursor: ns-resize;
	height: $resizer-width;
	background-color: gray;
	width: 100%;
	flex-shrink: 0;
	z-index: 10;
}

.header {
	height: $header-height;
	border-bottom: gray solid 1px;

	.logo {
		height: 100%;
		width: 200px;
		border-right: gray solid 1px;
		flex-shrink: 0;
	}

	.study-list {
		flex: 1;
		height: 100%;
	}
}

.head-menubar {
	display: flex;
	flex-direction: row;
	width: 100%;
}
.close-3d {
	width: 62px;
	border-bottom: 1px solid grey;
	display: flex;
	align-items: center;
	justify-content: center;
	fill: var(--color-theme-text);
}

.close-3d:hover {
	background-color: var(--color-tbbtn-hover);
}

.close-3d:active {
	background-color: var(--color-tbbtn-active);
}

.closeicon {
	width: 40px;
	height: 40px;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 34px auto;
	margin: 0;
}

.closeicon__svg {
	width: 100%;
	height: 100%;
}

.main {
	width: 100%;
	height: 100%;

	.nav-display {
		flex: 1;
	}

	.toolbar-top {
		height: 200px;
		width: 100%;
	}

	.toolbar-right {
		width: 200px;
		height: 100%;
		flex-shrink: 0;
	}

	.display-area {
		flex: 1;
		flex-shrink: 0;
	}
	.nav-left {
		height: 100%;
	}

	.nav-bottom {
		width: 100%;
	}
}

.footer {
	height: $footer-height;
	border-top: gray solid 1px;
}
</style>
